<template>
    <div>
        <el-carousel :interval="3000" type="card" height="300px">
            <el-carousel-item v-for="item in arr" :key="item">
                <img :src="item" alt="">
            </el-carousel-item>
        </el-carousel>
        <LabelTitle title="大宗交易平台公告" color="#333" />
        <el-table :highlight-current-row="true" :data="list" style="width: 100%">

            <el-table-column prop="title" label="标题" />
            <el-table-column prop="user" label="发布者" />
            <el-table-column label="发布日期">
                <template #default="scope">
                    {{formatDate(scope.row.date) }}
                </template>
            </el-table-column>

            <el-table-column label="内容">
                <template #default="scope">
                    <span class="content"> {{scope.row.content}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" style="width:auto;padding:0" text @click="handleClick(scope.row)">查看详情
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="center">
            <el-pagination background layout="prev, pager, next" v-model:current-page="pageConfig.page"
                :total="pageConfig.count" :page-size="pageConfig.size" :current-change="handlePageChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import img1 from "@/assets/1.jpg"
import img2 from "@/assets/2.jpg"
import img3 from "@/assets/3.jpg"
import LabelTitle from "@/components/LabelTitle/index.vue"
import { ref, watch } from "vue"
import { useRouter } from "vue-router"
import { announcementListApi } from "../../../../api/a"
import { delay, responseCallback } from "../../../../utils"
import { formatDate } from "../../../../utils/date"

const arr = [img1, img2, img3]
const list = ref([]);
const router = useRouter();
const pageConfig = ref({
    page: 1,
    size: 5,
    count: 0,
    type: 1,
})
function handlePageChange(page) {
    pageConfig.value.page = page;
}
responseCallback({
    promise: announcementListApi(undefined, {
        ...pageConfig.value
    }),
    cb(data: any) {
        list.value = data.list;
        pageConfig.value.count = data.count
    }

})

watch(() => pageConfig.value.page, async () => {
    responseCallback({
        promise: announcementListApi(undefined, {
            ...pageConfig.value
        }),
        cb(data: any) {
            list.value = data.list;
            pageConfig.value.count = data.count
        }

    })
});

const handleClick = (item) => {
    router.push({
        name: "AnnouncementDetail",
        params: {
            id: item.id
        }
    })
}


</script>

<style lang="less" scoped>
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.content {
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.center {
    display: flex;
    margin-top: 2rem;
    justify-content: center;
}
</style>